<template>
  <div>
    <vxe-modal v-model="isVisiable" width="75vw" show-footer :mask="false">
      <template #title>
        <span class="text-bold">选择流程方案节点</span>
      </template>
      <template #default>
        <div style="height:65vh">
          <vxe-table ref="wkflwNodeRef" show-overflow auto-resize resizable height="auto" :data="wkflwNodeList" :row-config="{isCurrent:true}">
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="code" title="编号" width="60"></vxe-column>
            <vxe-column field="node" title="流程节点" min-width="100"></vxe-column>
          </vxe-table>
        </div>
      </template>
      <template #footer>
        <vxe-button @click="cancelEvent">关闭</vxe-button>
        <vxe-button @click="cancelEvent">取消</vxe-button>
        <vxe-button status="primary" @click="confirmEvent">确定</vxe-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, getCurrentInstance, defineProps } from "vue";
import { Splitpanes, Pane } from 'splitpanes';

let { proxy }: any = getCurrentInstance();
let isVisiable = ref(false);
let wkflwList: any[] = reactive([{ code: '001', wk: '一般细菌及药敏鉴定方案流程' }, { code: '002', wk: '支原体及药敏鉴定方案流程' }, { code: '003', wk: '病毒及药敏鉴定' }, { code: '004', wk: '寄生虫及药敏鉴定' }]);/**流程方案集合 */
let wkflwNodeList: any[] = reactive([{ code: '001', node: '培养' }, { code: '002', node: '染色' }, { code: '003', node: '观察形态' }, { code: '004', node: '药敏试验' }, { code: '005', node: '结论报告' }]);/**流程方案节点集合 */
const props = defineProps({});
const wkflwRef = ref(null);/**流程方案列表对象 */
const wkflwNodeRef = ref(null);/**流程方案节点列表对象 */
defineExpose({
  showModal,/**打开选择方案的弹窗 */
});
/**流程方案单元格点击事件 */
function wkflwClick({ row, rowIndex }) {
  wkflwRef.value?.setRadioRow(row);
}
/**流程方案行单选按钮选中事件 */
function setSelectRow(row) {
  wkflwRef.value?.setRadioRow(row);
}
/**页面初始化/切换显示隐藏 */
function showModal() {
  isVisiable.value = true;
}
/**确认选择 */
function confirmEvent() {
  //todo
}
/**关闭窗体 */
function cancelEvent() {
  isVisiable.value = false;
}

</script>

<style scoped lang="scss">
.custom-radio {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}
</style>
